import React from 'react';
import { Folder, FileText, Film, ListTodo, Bot, Monitor } from 'lucide-react';

const items = [
  {
    name: "视频项目",
    description: "系列主题管理，让你的视频内容更加连贯和有序！",
    icon: Folder
  },
  {
    name: "视频文案",
    description: "文案是视频的核心，强大的文案编辑器支持 AI 辅助创作",
    icon: FileText
  },
  {
    name: "分镜脚本",
    description: "专业级的分镜脚本管理，让你的视频制作更有条理！",
    icon: Film
  },
  {
    name: "进度管理",
    description: "可视化拍摄进度管理，实时追踪每个项目的完成状态",
    icon: ListTodo
  },
  {
    name: "AI 创作",
    description: "创新的AI辅助工具，助力你打造独特的视频内容！",
    icon: Bot
  },
  {
    name: "题词器",
    description: "精心设计的提词器，多端适配，镜像题词可搭配相机录制，提升效率",
    icon: Monitor
  },
  // {
  //   name: "语音合成",
  //   description: "多种语音风格选择，快速生成高质量配音，提升视频制作效率",
  //   icon: Monitor
  // },
  // {
  //   name: "字幕生成",
  //   description: "自动识别语音生成字幕，支持多语言翻译和样式自定义",
  //   icon: FileText
  // },
  {
    name: "封面制作",
    description: "丰富的封面模板和设计工具，快速制作吸引眼球的视频封面",
    icon: Film
  },
  {
    name: "音乐库",
    description: "海量正版音乐素材，按场景分类，轻松找到适合视频的背景音乐",
    icon: Folder
  },

];

export default function Features() {
  return (
    <section className="mx-auto container py-12 md:py-20 lg:py-24 ">
      <div className=" mx-auto">
        <div className="flex flex-col items-center justify-center space-y-4 text-center mb-8 md:mb-12">
          <div className="my-4">
            <h2 className="text-2xl sm:text-3xl md:text-4xl font-extrabold text-gray-900 tracking-tight">
              为您的视频创作提供更多可能
            </h2>
          </div>
        </div>
        <div className="grid gap-6 sm:gap-8 md:gap-10 lg:gap-12 grid-cols-1 sm:grid-cols-3 lg:grid-cols-4">
          {items.map((item, itemIdx) => {
            const Icon = item.icon;
            return (
              <div 
                key={itemIdx} 
                className="relative bg-white p-5 sm:p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300"
              >
                <div className="absolute -top-6 left-6 bg-rose-500 text-white rounded-full w-10 h-10 sm:w-12 sm:h-12 flex items-center justify-center">
                  <Icon className="w-5 h-5 sm:w-6 sm:h-6" />
                </div>
                <div className="grid gap-2 sm:gap-3 pt-6">
                  <h2 className="text-lg sm:text-xl font-bold text-gray-900">{item.name}</h2>
                  <p className="text-sm sm:text-base text-gray-600 leading-relaxed">
                    {item.description}
                  </p>
                </div>
              </div>
            )
          })}
        </div>
      </div>
    </section>
  );
}